<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>瞬联商城-购物车</title>
    <!-- 引入图标字体样式 -->
    <link rel="stylesheet" th:href="@{/mall/css/iconfont.css}">
    <!-- 引入公共样式 -->
    <link rel="stylesheet" th:href="@{/mall/css/common.css}">
    <!-- 引入头部样式 -->
    <link rel="stylesheet" th:href="@{/mall/styles/header.css}">
    <!-- 引入购物车页面样式 -->
    <link rel="stylesheet" th:href="@{/mall/styles/cart.css}">
    <!-- 引入 SweetAlert2 样式 -->
    <link rel="stylesheet" th:href="@{/admin/plugins/sweetalert2/sweetalert2.min.css}"/>
    <!-- jQuery -->
    <script th:src="@{/admin/plugins/jquery/jquery.min.js}"></script>
    <!-- 引入 SweetAlert2 脚本 -->
    <script th:src="@{/admin/plugins/sweetalert2/sweetalert2.all.min.js}"></script>
    <!-- 引入购物车页面逻辑脚本 -->
    <script th:src="@{/mall/js/cart.js}" type="text/javascript"></script>
    <!-- 设置上下文路径 -->
    <script th:inline="javascript">
        let ctx = /*[[@{/}]]*/"";
        if (ctx.endsWith("/")) {
            ctx = ctx.substring(0, ctx.length - 1);
        }
    </script>
</head>
<body>

<!-- 购物车主容器 -->
<div id="cart">
    <!-- 页面顶部横幅 -->
    <div class="banner_x center">
        <!-- 返回首页链接 -->
        <a th:href="@{/shopping/index}">
            <div class="logo fl">
                <img th:src="@{/mall/image/new-bee-logo-3.png}"/>
            </div>
        </a>

        <!-- 页面标题 -->
        <div class="wdgwc fl ml20">购物车</div>
        <!-- 温馨提示信息 -->
        <div class="wxts fl ml20">温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</div>
        <div class="clear"></div>
    </div>
    <!-- 分割线 -->
    <div class="cart_line"></div>
    <!-- 购物车内容区域 -->
    <div class="cart_bg">
        <!-- 判断购物车是否为空 -->
        <th:block th:if="${#lists.isEmpty(carts)}">
            <!-- 空购物车提示 -->
            <div class="list center">
                <img style="position: absolute;margin-top: 16px;left: 45%;" th:src="@{/mall/image/null-content.png}">
            </div>
        </th:block>
        <!-- 购物车非空时显示商品列表 -->
        <th:block th:unless="${#lists.isEmpty(carts)}">
            <div class="list center">
                <!-- 商品列表头部 -->
                <div class="top2 center">
                    <div class="sub_top fl">
                    </div>
                    <div class="sub_top fl">商品名称</div>
                    <div class="sub_top fl">单价</div>
                    <div class="sub_top fl">数量</div>
                    <div class="sub_top fl">小计</div>
                    <div class="sub_top fr">操作</div>
                    <div class="clear"></div>
                </div>
                <!-- 遍历购物车商品项 -->
                <th:block th:each="item : ${items}">
                    <!-- 每个商品项 -->
                    <div class="content2 center">
                        <div class="sub_content fl ">
                        </div>
                        <!-- 商品图片 -->
                        <div class="sub_content cover fl"><img th:src="@{${item.pic}}"></div>
                        <!-- 商品名称 -->
                        <div class="sub_content fl ft20" th:text="${item.name}">商品名称</div>
                        <!-- 商品单价 -->
                        <div class="sub_content fl" th:text="${item.price+'0'+'元'}">1299元</div>
                        <!-- 商品数量输入框 -->
                        <div class="sub_content fl">
                            <input class="goods_count" th:id="${'goodsCount'+item.id}" type="number"
                                   th:onblur="'updateItem('+${item.id}+')'"
                                   th:value="${item.num}" step="1" min="1"
                                   max="5">
                        </div>
                        <!-- 商品小计 -->
                        <div class="sub_content fl" th:text="${item.num*item.price+'0'+'元'}">1299元</div>
                        <!-- 删除商品按钮 -->
                        <div class="sub_content fl">
                            <a href="##" class="deleteItem" id="deleteItem" th:data-id="${item.id}">×</a>
                        </div>

                        <div class="clear"></div>
                    </div>
                </th:block>
            </div>
        </th:block>
        <!-- 结算区域 -->
        <div class="pre_order mt20 center">
            <div class="tips fl ml20">
                <ul>
                    <!-- 继续购物链接 -->
                    <li><a th:href="@{/shopping/index}">继续购物</a></li>
                    <li>|</li>
                    <!-- 商品总数 -->
                    <li>共<span th:text="${items.size()}">13</span>件商品</li>
                    <div class="clear"></div>
                </ul>
            </div>
            <!-- 结算按钮区域 -->
            <div class="order_div fr">
                <!-- 合计金额 -->
                <div class="order_total fl">合计（不含运费）：<span th:text="${priceTotal}+'0元'">1299.00元</span></div>
                <div class="order_button fr">
                    <!-- 根据商品数量判断是否启用结算按钮 -->
                    <th:block th:if="${items.size() == 0}">
                        <input class="order_button_c" type="button" name="tip"
                               id="noPay"
                               value="去结算"/>
                    </th:block>
                    <th:block th:unless="${items.size()== 0}">
                        <input class="order_button_d" type="button" name="settle"
                               id="pay"
                               value="去结算"/>
                    </th:block>
                </div>
                <div class="clear"></div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
</div>
<!-- 引入页脚 -->
<div th:replace="mall/footer::footer-fragment"></div>
</body>
<script th:inline="javascript">
    let items = /*[[${items}]]*/ [];
    console.log("Items data:", items);
</script>
</html>

